<template>
    <div class="divBox">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <div class="container">
                    <el-form size="small" label-width="100px" inline>
                        <el-form-item label="分销等级：">
                            <el-select v-model="formdata.spread_level" clearable filterable placeholder="请选择" class="selWidth"
                                @change="getList()">
                                <el-option v-for="item in selectlist" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="企业名称：" class="width100">
                            <el-input v-model="formdata.name" @keyup.enter.native="getList"
                                placeholder="请输入企业名称" class="selWidth" size="small">
                                <el-button slot="append" icon="el-icon-search" size="small" class="el-button-solt"
                                    @click="getList()" />
                            </el-input>
                        </el-form-item>
                    </el-form>
                </div>

                <el-row align="middle" :gutter="10" class="ivu-mt">
                    <el-col :xl="4" :lg="6" :md="12" :sm="24" :xs="24" class="ivu-mb mb10">
                        <div class="card_box">
                            <div class="card_box_cir one">
                                <div class="card_box_cir1 one1">
                                    <i class="el-icon-user-solid" style="font-size: 24px;" />
                                </div>
                            </div>
                            <div class="card_box_txt">
                                <span class="sp1" v-text="cardLists.Indirect_commission || 0" />
                                <span class="sp2">合伙人数</span>
                            </div>
                        </div>
                    </el-col>
                    <el-col :xl="4" :lg="6" :md="12" :sm="24" :xs="24" class="ivu-mb mb10">
                        <div class="card_box">
                            <div class="card_box_cir two">
                                <div class="card_box_cir1 two1">
                                    <i class="el-icon-user-solid" style="font-size: 24px;" />
                                </div>
                            </div>
                            <div class="card_box_txt">
                                <span class="sp1" v-text="cardLists.count_agent || 0" />
                                <span class="sp2">代理商数</span>
                            </div>
                        </div>
                    </el-col>
                    <el-col :xl="4" :lg="6" :md="12" :sm="24" :xs="24" class="ivu-mb mb10">
                        <div class="card_box">
                            <div class="card_box_cir three">
                                <div class="card_box_cir1 three1">
                                    <i class="el-icon-trophy" style="font-size: 24px;" />
                                </div>
                            </div>
                            <div class="card_box_txt">
                                <span class="sp1" v-text="cardLists.commission+'豆包' || 0" />
                                <span class="sp2">直推奖金</span>
                            </div>
                        </div>
                    </el-col>
                    <el-col :xl="4" :lg="6" :md="12" :sm="24" :xs="24" class="ivu-mb mb10">
                        <div class="card_box">
                            <div class="card_box_cir four">
                                <div class="card_box_cir1 four1">
                                    <i class="el-icon-trophy" style="font-size: 24px;" />
                                </div>
                            </div>
                            <div class="card_box_txt">
                                <span class="sp1" v-text="cardLists.Indirect_commission+'豆包' || 0" />
                                <span class="sp2">间推奖金</span>
                            </div>
                        </div>
                    </el-col>
                    <!-- <el-col :xl="4" :lg="6" :md="12" :sm="24" :xs="24" class="ivu-mb mb10">
                        <div class="card_box">
                            <div class="card_box_cir five">
                                <div class="card_box_cir1 five1">
                                    <i class="el-icon-s-cooperation" style="font-size: 24px;" />
                                </div>
                            </div>
                            <div class="card_box_txt">
                                <span class="sp1" v-text="cardLists.pay_money || 0" />
                                <span class="sp2">总金额</span>
                            </div>
                        </div>
                    </el-col> -->
                    <el-col :xl="4" :lg="6" :md="12" :sm="24" :xs="24" class="ivu-mb mb10">
                        <div class="card_box">
                            <div class="card_box_cir five">
                                <div class="card_box_cir1 five1">
                                    <i class="el-icon-s-cooperation" style="font-size: 24px;" />
                                </div>
                            </div>
                            <div class="card_box_txt">
                                <span class="sp1" v-text="cardLists.thank_reward +'豆包' || 0" />
                                <span class="sp2">感恩奖</span>
                            </div>
                        </div>
                    </el-col>
                    <el-col :xl="4" :lg="6" :md="12" :sm="24" :xs="24" class="ivu-mb mb10">
                        <div class="card_box">
                            <div class="card_box_cir five">
                                <div class="card_box_cir1 five1">
                                    <i class="el-icon-s-cooperation" style="font-size: 24px;" />
                                </div>
                            </div>
                            <div class="card_box_txt">
                                <span class="sp1" v-text="cardLists.train_fund+'豆包' || 0" />
                                <span class="sp2">培育基金</span>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <el-table  :data="tableData.list" style="width: 100%" size="mini" class="table"
                highlight-current-row>
                <el-table-column prop="username" label="用户昵称" min-width="120" />
                <el-table-column prop="agentCount" label="下级代理商数量" min-width="120" />
                <el-table-column prop="partnerCount" label="下级合伙人数量" min-width="120" />
                <el-table-column label="分销等级" min-width="80" :formatter="formatter">
                </el-table-column>
                <el-table-column prop="commission" label="直推奖金" min-width="120" :formatter="commission"/>
                <el-table-column prop="Indirect_commission" label="间推奖金" min-width="120" :formatter="Indirectcommission"/>
                <el-table-column prop="train_fund" label="培育基金" min-width="80" :formatter="trainfund" />
                <el-table-column prop="thank_reward" label="感恩奖" min-width="80" :formatter="thankreward"></el-table-column>
                <el-table-column prop="spreadEnterprise.name" label="推广企业名称" min-width="180" />
                <el-table-column prop="spread_time" label="开始推广时间" min-width="180" />
            </el-table>
            <div class="block">
                <el-pagination :page-sizes="[20, 40, 60, 80]" :page-size="formdata.limit" :current-page="formdata.page"
                    layout="total, sizes, prev, pager, next, jumper" :total="tableData.count"
                    @size-change="handleSizeChange" @current-change="pageChange" />
            </div>
        </el-card>
    </div>
</template>

<script>
import { spreadTitle, spreadList } from '@/api/product'
import cardsData from "@/components/cards/index";
export default {
    name: 'channelList',
    components: { cardsData },
    data() {
        return {
            formdata: {
                "page": 1,
                "limit": 10,
                "spread_level": '全部',
                "name": ""
            },
            tableFrom: {},
            cardLists: {},
            tableData: {
                data: {}
            },
            selectlist: [
                {
                    value: '0',
                    label: '全部'
                },
                {
                    value: '1',
                    label: '代理商'
                },
                {
                    value: '2',
                    label: '合伙人'
                },
            ]
        }
    },
    created() {
        this.getList()
        this.getTitle()
    },
    methods: {
        thankreward(row){
            return row.thank_reward + '豆包'
        },
        trainfund(row){
            return row.train_fund + '豆包'
        },
        Indirectcommission(row){
            return row.Indirect_commission + '豆包'
        },
        commission(row){
            return row.commission + '豆包'
        },
        pageChange() {
            this.getList()
        },
        handleSizeChange() {
            this.getList()
        },
        formatter(row) {
            return row.spread_level == 1 ? '代理商' : '合伙人'
        },
        getList() {
            spreadList(this.formdata).then(res => {
                this.tableData = res.data
            })
        },
        getTitle() {
            spreadTitle().then(res => {
                this.cardLists = res.data;
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.one {
    background: #e4ecff;
}

.two {
    background: #fff3e0;
}

.three {
    background: #eaf9e1;
}

.four {
    background: #ffeaf4;
}

.five {
    background: #f1e4ff;
}

.one1 {
    background: #4d7cfe;
}

.two1 {
    background: #ffab2b;
}

.three1 {
    background: #6dd230;
}

.four1 {
    background: #ff85c0;
}

.five1 {
    background: #b37feb;
}

.card_box {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    /*justify-content: center*/
    padding: 25px;
    box-sizing: border-box;
    border-radius: 4px;
    background: #f5f7f9;

    .card_box_cir {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        margin-right: 20px;
        display: flex;
        justify-content: center;
        align-items: center;

        .card_box_cir1 {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
        }
    }

    .card_box_txt {
        .sp1 {
            display: block;
            color: #252631;
            font-size: 24px;
            line-height: 37px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .sp2 {
            display: block;
            color: #000000;
            font-size: 12px;
        }
    }
}
</style>